<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="维修工单" name="first">
        <el-form :inline="true" :model="query" size="mini">
          <el-form-item label="">
            <el-input v-model="query.name" placeholder="设备名"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="query.equip_status" placeholder="设备状态">
              <el-option
                v-for="item in estatus"
                :key="item"
                :label="item"
                :value="item || ''"
                >{{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="submitQuery"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <!-- <div style="text-align: right">
          <el-input
            size="mini"
            style="width: 300px; margin-bottom: 10px"
            placeholder="报告编号/设备名称/设备编号/处理人"
            v-model="query.data"
          >
            <template #append>
              <el-button icon="el-icon-search" @click="queryData"></el-button>
            </template>
          </el-input>
        </div> -->
        <div class="content">
          <!-- <el-table :data="tableData" border style="width: 100%">
            <el-table-column
              prop="id"
              label="序号"
              fixed="left"
            ></el-table-column>
            <el-table-column
              prop="report_num"
              label="报告编号"
              width="150"
              fixed="left"
            ></el-table-column>
            <el-table-column prop="equip_num" label="设备编号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="设备名称" width="170">
            </el-table-column>
            <el-table-column prop="report_time" label="报障时间" width="170">
            </el-table-column>
            <el-table-column prop="report_name" label="报障人">
            </el-table-column>
            <el-table-column prop="equip_status" label="设备状态" width="100">
              <template v-slot="scope">
                <el-tag size="medium" v-if="scope.row.equip_status == '正常'">{{
                  scope.row.equip_status
                }}</el-tag>
                <el-tag
                  size="medium"
                  type="danger"
                  v-if="scope.row.equip_status == '故障'"
                  >{{ scope.row.equip_status }}</el-tag
                >
                <el-tag
                  size="medium"
                  type="warning"
                  v-if="scope.row.equip_status == '带病运行'"
                  >{{ scope.row.equip_status }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="fault_type" label="故障类型">
            </el-table-column>
            <el-table-column prop="fault_level" label="故障等级">
              <template v-slot="scope">
                <el-tag size="medium" v-if="scope.row.fault_level == '一般'">{{
                  scope.row.fault_level
                }}</el-tag>
                <el-tag
                  size="medium"
                  type="danger"
                  v-if="scope.row.fault_level == '紧急'"
                  >{{ scope.row.fault_level }}</el-tag
                >
                <el-tag
                  size="medium"
                  type="warning"
                  v-if="scope.row.fault_level == '严重'"
                  >{{ scope.row.fault_level }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="fault_description" label="故障描述">
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template v-slot="scope">
                <el-tag
                  size="medium"
                  type="danger"
                  v-if="scope.row.status == '待处理'"
                  >{{ scope.row.status }}</el-tag
                >
                <el-tag size="medium" v-if="scope.row.status == '已接单'">{{
                  scope.row.status
                }}</el-tag>
                <el-tag
                  size="medium"
                  type="info"
                  v-if="scope.row.status == '维修中'"
                  >{{ scope.row.status }}</el-tag
                >
                <el-tag
                  size="medium"
                  type="warning"
                  v-if="scope.row.status == '已解决'"
                  >{{ scope.row.status }}</el-tag
                >
                <el-tag
                  size="medium"
                  type="success"
                  v-if="scope.row.status == '已验收'"
                  >{{ scope.row.status }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="handler" label="处理人"> </el-table-column>
            <el-table-column prop="handle_time" label="处理时间" width="170">
            </el-table-column>
            <el-table-column label="操作" width="210" fixed="right">
              <template v-slot="scope">
                <el-button
                  size="mini"
                  @click="receive(scope.$index, scope.row)"
                  >接单</el-button
                >
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table> -->
          <el-table :data="tableData" border size="small">
            <el-table-column prop="num" label="维修编号" width="170">
            </el-table-column>
            <el-table-column prop="equip_num" label="设备编号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="设备名称" width="170">
            </el-table-column>
            <el-table-column prop="equip_status" label="设备状态" width="100">
              <template v-slot="scope">
                <el-tag size="medium" v-if="scope.row.equip_status == '正常'">{{
                  scope.row.equip_status
                }}</el-tag>
                <el-tag
                  size="medium"
                  type="danger"
                  v-if="scope.row.equip_status == '故障'"
                  >{{ scope.row.equip_status }}</el-tag
                >
                <el-tag
                  size="medium"
                  type="warning"
                  v-if="scope.row.equip_status == '带病运行'"
                  >{{ scope.row.equip_status }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="error" label="异常项目" width="170">
            </el-table-column>
            <el-table-column prop="position" label="位置" width="80">
            </el-table-column>
            <el-table-column prop="created_at" label="报障时间" width="170">
            </el-table-column>
            <el-table-column prop="report_name" label="报障人" width="100">
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template v-slot="scope">
                <el-tag
                  size="medium"
                  type="danger"
                  v-if="scope.row.status == '待处理'"
                  >{{ scope.row.status }}</el-tag
                >
                <el-tag size="medium" v-if="scope.row.status == '已接单'">{{
                  scope.row.status
                }}</el-tag>
                <el-tag
                  size="medium"
                  type="info"
                  v-if="scope.row.status == '维修中'"
                  >{{ scope.row.status }}</el-tag
                >
                <el-tag
                  size="medium"
                  type="warning"
                  v-if="scope.row.status == '已解决'"
                  >{{ scope.row.status }}</el-tag
                >
                <el-tag
                  size="medium"
                  type="success"
                  v-if="scope.row.status == '已验收'"
                  >{{ scope.row.status }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template v-slot="scope">
                <el-button size="mini" @click="receive(scope.$index, scope.row)"
                  >接单</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>

      <el-dialog title="请判断后提交" v-model="receiveDialogShow" width="30%">
        <el-form
          ref="receiveFrom"
          :model="receiveFrom"
          label-width="80px"
          size="mini"
        >
          <el-form-item label="故障类型">
            <el-select
              v-model="receiveFrom.fault_type"
              placeholder="请选择故障类型"
            >
              <el-option
                v-for="item in fault_type"
                :key="item"
                :label="item"
                :value="item || ''"
                >{{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="故障等级">
            <el-select
              v-model="receiveFrom.fault_level"
              placeholder="请选择故障等级"
            >
              <el-option
                v-for="item in fault_level"
                :key="item"
                :label="item"
                :value="item || ''"
                >{{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-tab-pane label="我的维修" name="second">
        <div style="text-align: right">
          <el-input
            size="mini"
            style="width: 300px; margin-bottom: 10px"
            placeholder="设备编号/设备名称/状态/处理人"
            v-model="myQuery.data"
          >
          </el-input>
          <el-button type="primary" icon="el-icon-search" @click="myQueryData"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" @click="resetMyQuery"
            >重置</el-button
          >
        </div>
        <div class="content">
          <el-table :data="myTableData" border style="width: 100%" size="mini">
            <el-table-column
              type="index"
              :index="indexMethod"
              label="序号"
              fixed="left"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="num"
              label="维修编号"
              width="160"
              fixed="left"
            ></el-table-column>
            <el-table-column prop="equip_num" label="设备编号" width="150">
            </el-table-column>
            <el-table-column prop="name" label="设备名称" width="170">
            </el-table-column>
            <el-table-column prop="equip_status" label="设备状态" width="100">
              <template v-slot="scope">
                <el-tag size="medium" v-if="scope.row.equip_status == '正常'">{{
                  scope.row.equip_status
                }}</el-tag>
                <el-tag
                  size="medium"
                  type="danger"
                  v-if="scope.row.equip_status == '故障'"
                  >{{ scope.row.equip_status }}</el-tag
                >
                <el-tag
                  size="medium"
                  type="warning"
                  v-if="scope.row.equip_status == '带病运行'"
                  >{{ scope.row.equip_status }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="error" label="异常项目"> </el-table-column>
            <el-table-column prop="position" label="位置"> </el-table-column>
            <el-table-column prop="report_time" label="报障时间" width="170">
            </el-table-column>
            <el-table-column prop="report_name" label="报障人">
            </el-table-column>
            <el-table-column prop="fault_type" label="故障类型">
            </el-table-column>
            <el-table-column prop="fault_level" label="故障等级">
              <template v-slot="scope">
                <el-tag size="medium" v-if="scope.row.fault_level == '一般'">{{
                  scope.row.fault_level
                }}</el-tag>
                <el-tag
                  size="medium"
                  type="danger"
                  v-if="scope.row.fault_level == '紧急'"
                  >{{ scope.row.fault_level }}</el-tag
                >
                <el-tag
                  size="medium"
                  type="warning"
                  v-if="scope.row.fault_level == '严重'"
                  >{{ scope.row.fault_level }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template v-slot="scope">
                <el-tag
                  size="medium"
                  type="danger"
                  v-if="scope.row.status == '待处理'"
                  >{{ scope.row.status }}</el-tag
                >
                <el-tag size="medium" v-if="scope.row.status == '已接单'">{{
                  scope.row.status
                }}</el-tag>
                <el-tag
                  size="medium"
                  type="info"
                  v-if="scope.row.status == '维修中'"
                  >{{ scope.row.status }}</el-tag
                >
                <el-tag
                  size="medium"
                  type="warning"
                  v-if="scope.row.status == '已解决'"
                  >{{ scope.row.status }}</el-tag
                >
                <el-tag
                  size="medium"
                  type="success"
                  v-if="scope.row.status == '已验收'"
                  >{{ scope.row.status }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="handler" label="处理人"> </el-table-column>
            <el-table-column prop="updated_at" label="处理时间" width="170">
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template v-slot="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="myHandleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-pagination
            background
            @size-change="myHandleSizeChange"
            @current-change="myHandleCurrentChange"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="myTableTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>

      <el-dialog title="修改" v-model="maintainDialogShow" width="30%">
        <el-form
          ref="maintainForm"
          :model="maintainForm"
          label-width="80px"
          size="mini"
        >
          <el-form-item label="设备状态">
            <el-select
              v-model="maintainForm.equip_status"
              placeholder="请选择设备状态"
            >
              <el-option
                v-for="item in equip_status"
                :key="item"
                :label="item"
                :value="item || ''"
                >{{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="maintainForm.status" placeholder="请选择状态">
              <el-option
                v-for="item in status"
                :key="item"
                :label="item"
                :value="item || ''"
                >{{ item }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item style="text-align: right">
            <el-button type="primary" @click="myOnSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>
import {
  getMyPage,
  handleReceive,
  myMaintainDelete,
  myMaintainUpdate,
} from "../api/maintain";
import { page as getPage, repairDelete } from "../api/warranty";
export default {
  data() {
    return {
      activeName: "first",
      query: { page: 1, limit: 10 },
      myQuery: { page: 1, limit: 10 },
      tableData: [],
      tableTotal: 0,
      myTableData: [],
      myTableTotal: 0,
      receiveFrom: {},
      receiveDialogShow: false,
      fault_type: ["管道故障", "电气故障", "机械故障", "断线", "其他"],
      fault_level: ["严重", "紧急", "一般"],
      maintainDialogShow: false,
      maintainForm: {},
      equip_status: ["故障", "带病运行", "正常"],
      status: ["维修中", "已解决"],
    };
  },
  created() {
    this.page();
  },
  methods: {
    submitQuery() {
      this.page();
    },
    resetQuery() {
      this.query = { limit: 10, page: 1 };
      this.page();
    },
    receive(index, row) {
      if (row.status != "待处理") {
        this.$message.error("该维修已经被接单了，不能重复接单");
      } else {
        this.receiveFrom = { ...row };
        this.receiveDialogShow = true;
      }
    },
    onSubmit() {
      this.receiveDialogShow = false;
      handleReceive(this.receiveFrom).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message({ type: "success", message: "接单成功!" });
        }
      });
    },
    indexMethod(index) {
      return index + 1;
    },
    page() {
      getPage(this.query).then((res) => {
        this.tableTotal = res.data.count;
        this.tableData = res.data.rows;
        // console.log(res);
      });
    },
    myPage() {
      getMyPage(this.myQuery).then((res) => {
        this.myTableTotal = res.data.count;
        this.myTableData = res.data.rows;
      });
    },
    handleClick(tab, event) {
      this.activeName = tab.props.name;
      if (this.activeName == "first") {
        this.page();
      } else {
        this.myPage();
      }
    },
    handleSizeChange(val) {
      this.query.limit = val;
      this.page();
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.page();
    },
    queryData() {
      this.page();
    },
    myHandleSizeChange(val) {
      this.myQuery.limit = val;
      this.myPage();
    },
    myHandleCurrentChange(val) {
      this.myQuery.page = val;
      this.myPage();
    },
    myQueryData() {
      this.myPage();
    },
    resetMyQuery() {
      this.myQuery = { limit: 10, page: 1 };
      this.myPage();
    },
    handleDelete(index, row) {
      this.$confirm(`删除编号【${row.num}】, 是否继续?`, "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        repairDelete({ num: row.num })
          .then((res) => {
            if (res.success) {
              this.$message({ type: "success", message: "删除成功!" });
              this.page();
            } else {
              this.$message.error("删除失败！");
            }
          })
          .catch(() => this.$message.error("删除失败！"));
      });
    },
    myHandleDelete(index, row) {
      this.$confirm(`删除编号【${row.num}】, 是否继续?`, "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        myMaintainDelete({ num: row.num })
          .then((res) => {
            if (res.success) {
              this.$message({ type: "success", message: "删除成功!" });
              this.myPage();
            } else {
              this.$message.error("删除失败！");
            }
          })
          .catch(() => this.$message.error("删除失败！"));
      });
    },
    handleEdit(index, row) {
      this.maintainDialogShow = true;
      this.maintainForm = { ...row };
      console.log(this.maintainForm);
    },
    myOnSubmit() {
      myMaintainUpdate(this.maintainForm)
        .then((res) => {
          if (res.success) {
            this.$message({ message: "修改成功！", type: "success" });
            this.maintainDialogShow = false;
            this.myPage();
          } else {
            this.$message.error(res.data);
          }
        })
        .catch(() => this.$message.error("修改失败！"));
    },
  },
};
</script>